@import '../style/common.styl'

use-number()
	position relative
	font-monospace()

	&__drag
		position absolute
		top 0
		left 0
		z-index 100
		width 100%
		height 100%
		border 1px solid transparent
		border-radius 2px
		input-transition(border-color)
		input-border()

	&.editing &__drag
		display none

	&__input
		input()
		width 100%
		color var(--syntax-constant)
		text-align right

		/* Chrome, Safari, Edge, Opera */
		&::-webkit-outer-spin-button, &::-webkit-inner-spin-button
			margin 0
			-webkit-appearance none

		/* Firefox */
		&[type=number]
			-moz-appearance textfield

	&.exp &__input
		color var(--red)

	&.grayed-out &__input
		color var(--comment)

	&.tweaking &__input
		border-color var(--hover)